 <template>
 	<view class="my-release">
 		<!-- 	<view class="tablist">
 			<view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="onTabChange(index)">
 				<p :class="currentIndex === index ? 'active' : ''">{{ item.name }}</p>
 				<span v-if="currentIndex === index"></span>
 			</view>
 		</view> -->
 		<z-paging ref="paging" v-model="publishList" @query="queryList">
 			<view class="releaselist">
 				<view class="releaseItem" v-for="(item, index) in publishList" :key="index">
 					<view class="releaseitemtop">
 						<view class="user">
 							<view class="userleft">
 								<image :src="item.avatar" mode="widthFix"></image>
 								<view class="message">
 									<p>{{ item.nickname }}</p>
 								</view>
 							</view>
 							<p class="zhuanzu">{{ item.send_type_text || "" }}</p>
 						</view>
 						<view class="roominfo" v-if="item.send_type ===1">
 							<p>房子租金：<span>{{ item.money || "0" }}元/月</span></p>
 							<p>转租户型：<span>{{ item.house_type_text || "" }}</span></p>
 							<p>合同方式：<span>{{ item.contract_type_text || "" }}</span></p>
 						</view>
 						<view class="roominfo" v-else>
 							<p>{{ item.desc || "" }}</p>
 						</view>
 					</view>
 					<!-- 	<view class="releaseitemcenter">
 						<image @click="makePhone(item)" src="/static/mine/phone.png" mode="widthFix"></image>
 						<p>打电话</p>
 					</view> -->
 					<view class="releaseitembottom">
 						<view class="imagelist">
 							<image @click.stop="ViewImage(index, item.photos_path)"
 								v-for="(img, imgIndex) in item.photos_path" :key="imgIndex" :src="img"
 								v-if="isImage2(img)" mode="aspectFill" class="notice-img">
 							</image>
 							<video v-for="(img, index) in item.photos_path" :src="img" v-if="isImage(img)" controls
 								style="width: 100%; height: 166rpx"></video>
 						</view>
 						<view class="address">
 							<image src="/static/mine/dingwei.png" mode="widthFix"></image>
 							<p>{{ item.address }}</p>
 						</view>
 						<view class="desc">
 							<span>
 								{{ item.click }}浏览，{{ item.fen_num }}分享，{{item.updatetime }}
 							</span>
 						</view>
 					</view>
					<!-- item.zan_user.length>0 || -->
 					<view class="msgList-box" v-if="item.comment_list.length>0 ">
 				<!-- 		<view class="zan-box" v-if="item.zan_user.length>0">
 							<view class="zan-title">{{item.zan_user.length}}赞</view>
 							<u-avatar-group :urls="formatZanUser(item.zan_user)" size="24" gap="0.4"></u-avatar-group>
 						</view>
 						<view class="zan-line" v-if="item.zan_user.length>0&&item.comment_list.length>0"></view> -->
 						<view v-if="item.comment_list.length>0">
 							<view class="msgList" v-for="(c, v) in item.comment_list" :key="v">
 								<view class="msmall">
 									<text style="color: #2979ff" @click.stop="huifu(c, item)">{{ c.username }}</text>
 									<text @click.stop="deleteComment(c)">：{{ c.content }}</text>
 								</view>
 								<view v-for="(a, b) in c.list">
 									<view style="margin-top: 10rpx;display: flex;align-items: center;">
 										<view @click.stop="huifu(c, item)">
 											<text style="color: #2979ff">{{ a.username }}</text>
 											回复
 											<text style="color: #2979ff">{{ c.username }}</text>
 										</view>
 										<view @click.stop="deleteComment(a)">
 											：{{ a.content }}
 										</view>
 									</view>
 									<view v-for="(d, f) in a.list" :key="f">
 										<view style="margin-top: 10rpx;display: flex;align-items: center;">
 											<view @click.stop="huifu(d, item)">
 												<text style="color: #2979ff">{{ d.username }}</text>回复
 												<text style="color: #2979ff">{{ a.username }}</text>
 											</view>
 											<view @click.stop="deleteComment(d)"> ：{{ d.content }}</view>
 										</view>
 									</view>
 								</view>
 							</view>
 						</view>
 					</view>
 					<view class="button-group">
 						<view class="button" @click="deleteRelease(item)">删除</view>
 					</view>
 				</view>
 			</view>
 		</z-paging>
		<u-modal :show="msgshow" :title="msgtitle" confirmText="确认" cancelText="取消" :showCancelButton="true"
			@cancel="msgshow = false" @confirm="sureconfirm">
			<view class="slot-content" style="border: 1px #999 solid;padding: 20rpx;border-radius: 10rpx;width: 96%;">
				<textarea v-model="msgcontent" style="height: 80px;width: 100%;" cols="3" rows="1"
					placeholder="请输入评论"></textarea>
			</view>
		</u-modal>
 	</view>
 </template>

 <script>
	 import {
	 	addComment,
	 	delComment,
	 } from "@/api/gent.js";
 	import {
 		getPublishLists,
 		delPublish
 	} from "@/api/mine.js";
 	export default {
 		data() {
 			return {
 				currentIndex: 0,
 				tabList: [{
 						name: "显示",
 					},
 					{
 						name: "待审核",
 					},
 					{
 						name: "已过期",
 					},
 				],
 				formData: {
 					limit: 10,
 					page: 1,
 					status: "1",
 				},
 				publishList: [],
 				msgshow: false,
 				msgcontent: "",
 				msgtitle: "随便说点什么",
 				newhid: "",
 				pjcontent: null
 			};
 		},

 		methods: {
 			isImage(url) {
 				return /\.(mp4)$/i.test(url);
 			},
 			isImage2(url) {
 				return /\.(jpg|jpeg|png|gif)$/i.test(url);
 			},
 			ViewImage(index, arr) {
 				let filteredPaths = arr.filter((path) => !path.endsWith(".mp4"));
 				uni.previewImage({
 					current: filteredPaths[index], //当前点击的图片链接
 					urls: filteredPaths, //数组
 				});
 			},
			formatZanUser(zanUser) {
				return zanUser.map(user => user.avatar);
			},
 			makeMsg(val) {
 				this.pjcontent = val;
 				this.msgtitle = "随便说点什么";
 				this.msgshow = true;
 			},
			deleteComment(item) {
				if (item.can_del == 0) {
					return false
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该评论信息吗？',
					success: (res) => {
						if (res.confirm) {
							delComment({
								comment_id: item.id
							}).then(res => {
								that.$Toast('删除成功');
								that.refreshList();
							});
						}
					}
				});
			},
 			async sureconfirm() {
 				if (this.msgcontent == "") {
 					return this.$Toast('请输入内容')
 				}
 				addComment({
 					pub_id: this.pjcontent.id,
 					content: this.msgcontent,
 					pid: this.newhid,
 				}).then(res => {
 					this.msgshow = false;
 					this.msgcontent = ''
 					this.$Toast('提交成功')
 					this.refreshList();
 				})
 			},
 			huifu(val, id) {
 				this.msgcontent = "";
 				this.pjcontent = id;
 				this.msgshow = true;
 				this.msgtitle = "回复:" + val.username;
 				this.newhid = val.id;
 			},
 			deleteRelease(item) {
 				let that = this
 				uni.showModal({
 					title: '提示',
 					content: '确定删除该发布信息吗？',
 					success: (res) => {
 						if (res.confirm) {
 							delPublish({
 								id: item.id
 							}).then(res => {
 								that.$Toast('删除成功');
 								that.refreshList();
 							});
 						}
 					}
 				});
 			},
 			refreshList() {
 				if (this.$refs.paging) {
 					this.$refs.paging.refresh();
 				}
 			},
 			async queryList(pageNo, pageSize) {
 				const res = await getPublishLists({
 					limit: pageSize,
 					page: pageNo,
 					status: this.formData.status,
 				});
 				if (res.response.statusCode === 200) {
 					this.$refs.paging.complete(res.data.data.data);
 				}
 			},
 			onTabChange(index) {
 				switch (index) {
 					case 0:
 						this.formData.status = "1";
 						break;
 					case 1:
 						this.formData.status = "0";
 						break;
 					case 2:
 						this.formData.status = "3";
 						break;
 					default:
 						break;
 				}
 				this.currentIndex = index;
 				if (this.$refs.paging) {
 					this.$refs.paging.reload();
 				}
 			},
 			makePhone(item) {
 				uni.makePhoneCall({
 					phoneNumber: item.phone,
 				});
 			},
 			goBack() {
 				uni.navigateBack({
 					delta: 1
 				});
 			},
 		},
 	};
 </script>

 <style lang="scss" scoped>
 	.my-release {
 		min-height: 100vh;
 		background-color: #f5f6fa;
 		padding-top: constant(safe-area-inset-top);
 		/* 为了适配刘海屏等 */
 		padding-top: calc(env(safe-area-inset-top));
 	}

 	.custom-nav-bar {
 		height: 50px;
 		/* 导航栏高度 */
 		display: flex;
 		align-items: center;
 		color: #000;
 		padding: 30px 16px 16px 16px;
 	}

 	.nav-back {
 		flex: 0 0 auto;
 		cursor: pointer;

 		image {
 			width: 12px;
 			height: 24px;
 			// padding-left: 16px;
 		}
 	}

 	.nav-title {
 		flex: 1 1 auto;
 		text-align: center;
 		font-family: PingFangSC, PingFang SC;
 		font-weight: 500;
 		font-size: 17px;
 		color: #000000;
 	}

 	.tablist {
 		left: 0;
 		right: 0;
 		position: fixed;
 		z-index: 999999;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 0 36px;
 		background: #f5f6fa;

 		.tabItem {
 			height: 35px;
 			margin-top: 10rpx;

 			p {
 				font-family: PingFangSC, PingFang SC;
 				font-weight: 500;
 				font-size: 13px;
 				color: #606060;
 			}

 			.active {
 				font-size: 15px;
 				color: #333333;
 				font-weight: bold;
 			}

 			span {
 				width: 16px;
 				height: 3px;
 				background: linear-gradient(#0079ff 0%, #1ca9fe 100%);
 				box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.3);
 				border-radius: 2px;
 				display: block;
 				margin: 6px auto;
 			}
 		}
 	}

 	.releaselist {
 		width: 100%;
 		// height: 100vh;
 		// margin-top: 77rpx;
 	}

 	.releaseItem {
 		width: 88%;
 		padding: 12px;
 		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
 		border-radius: 12px;
 		background: #ffffff;
 		margin: 20px auto;

 		.releaseitemtop {
 			margin-bottom: 20rpx;
 			margin-top: 20rpx;

 			.user {
 				display: flex;
 				justify-content: space-between;

 				.userleft {
 					display: flex;

 					image {
 						width: 58px;
 						height: 58px;
 						margin-right: 10px;
 						border-radius: 8px;
 					}

 					.message {
 						p {
 							font-family: PingFangSC, PingFang SC;
 							font-weight: 500;
 							font-size: 16px;
 							color: #222222;
 							line-height: 30px;
 						}

 						span {
 							font-family: PingFangSC, PingFang SC;
 							font-weight: 400;
 							font-size: 12px;
 							color: #999999;
 							display: block;
 						}
 					}
 				}

 				.zhuanzu {
 					width: 54px;
 					height: 20px;
 					background: rgba(0, 149, 248, 0.08);
 					border-radius: 3px;
 					border: 1px solid #0095f8;
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
 					font-size: 11px;
 					color: #0095f8;
 					text-align: center;
 					line-height: 20px;
 				}
 			}

 			.roominfo {
 				font-family: PingFangSC, PingFang SC;
 				font-weight: 400;
 				font-size: 15px;
 				color: #4f5963;
 				line-height: 26px;

 				span {
 					color: #000;
 				}
 			}
 		}

 		.releaseitemcenter {
 			width: 100%;
 			height: 52px;
 			background: #e3f5ff;
 			border-radius: 8px;
 			margin: 12px auto;
 			display: flex;
 			align-items: center;

 			image {
 				width: 16px;
 				height: 16px;
 				margin-right: 10px;
 				margin-left: 38%;
 			}

 			p {
 				font-family: PingFangSC, PingFang SC;
 				font-weight: 500;
 				font-size: 14px;
 				color: #0095f8;
 			}
 		}

 		.releaseitembottom {
 			.imagelist {

 				display: grid;
 				grid-template-columns: repeat(4, 1fr);
 				gap: 8rpx;
 				margin-bottom: 24rpx;
 				.notice-img {
 					width: 100%;
 					height: 160rpx;
 					border-radius: 8rpx;
 				}
 			}

 			.address {
 				display: flex;
 				align-items: center;
 				padding: 10px 0;

 				image {
 					width: 16px;
 					height: 15px;
 					margin-right: 10px;
 				}

 				p {
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
 					font-size: 13px;
 					color: #333333;
 				}
 			}

 			.desc {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;

 				span {
 					display: block;
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
 					font-size: 12px;
 					color: #999999;
 				}

 				image {
 					width: 20px;
 					height: 18px;
 				}
 			}
 		}

 		.button-group {
 			display: flex;
 			justify-content: flex-end;
 			align-items: center;
			margin-top: 20rpx;
 			.button {
 				width: 80px;
 				height: 32px;
 				background: #ff4d4f;
 				border-radius: 16px;
 				font-family: PingFangSC, PingFang SC;
 				font-weight: 500;
 				font-size: 14px;
 				color: #ffffff;
 				text-align: center;
 				line-height: 32px;
 			}
 		}
 	}

 	.msgtitle {
 		font-weight: 500;
 		padding-bottom: 20rpx;
 		border-bottom: 1px #f5f6fa solid;
 		color: #666;
 		margin-top: 30rpx;
 	}

 	.msgList-box {
 		background: rgba(0, 149, 248, 0.08);
 		border-radius: 12rpx;
 		padding: 20rpx;
 		margin-top: 20rpx;

 		.zan-box {
 			display: flex;
 			align-items: center;

 			.zan-title {
 				font-size: 26rpx;
 				color: #8082A3;
 				margin-right: 20rpx;
 			}
 		}

 		.zan-line {
 			height: 1px;
 			background: #D1D2D4;
 			margin-top: 20rpx;
 			margin-bottom: 20rpx;
 		}
 	}

 	.msgList {
 		// padding: 20rpx 10rpx;
 		// display: flex;
 		color: #666;

 		.msmall {
 			display: flex;
 			width: 100%;
 			margin-bottom: 20rpx;
 		}

 		.mgsName {
 			color: #2979ff !important;
 		}
 	}
 </style>